<template>
	<view class="container">
		<!-- 提交加载 开始-->
		<u-loading-page :loading="pageLoading" loading-mode="spinner" loading-color="#FFFFFF" icon-size="36"
			font-size="12" color="#FFFFFF" loading-text="Loading···" bg-color="#00000050"></u-loading-page>
		<!-- 提交加载 结束-->
		<view class="musicBgm" @click="onPlayMusic">
			<u-icon size="50rpx" color="#ffffff" :name="isPlaying?'play-circle-fill':'pause-circle-fill'"></u-icon>
		</view>
		<view class="heard">
			<view class="heard-BG" :style="{ backgroundImage: backgroundImageUrl }" >
				<image class="avatar"
					:src="userInfo.headUrl===null?'https://www.afbeijing.net/static_resources/assets/morentouxiang.jpg':userInfo.headUrl"
					@click="goToRegister(0)" />
			</view>
			<view class="user-info">
				<text class="user-name">{{ userInfo.fyName }}</text>
				<view class="point-container">
					<image class="point-icon" src="https://www.afbeijing.net/static_resources/assets/jifen.png" />
					<text class="point-number">{{ userInfo.scoreCnt  }}</text>
				</view>
			</view>
		</view>
		<view class="main">
			<div v-for="(i,k) in data.case" :key="k"
				:class="(k===0)?'caseStatr':((k===data.case.length-1&&((k+1)% 2)!== 0)?'caseEnd':(k===data.case.length-1&&((k+1)% 2)=== 0)?'caseMiddle1':((k+1)% 2)=== 0?'caseMiddle1':'caseMiddle2')">
				<u-transition :show="transitionShow" :mode="((k+1)% 2)=== 0?'fade-left':'fade-right'"
					:duration="500+(k*200)">
					<view :class="i.learnProgress===1?'statrIsland-jump':''">
						<view :class="k===0?'statrIsland':((k+1)% 2)=== 0?'middleIsland-left1':'middleIsland-right1'"
							@click="goToRegister(1,i)">
							<view class="islandName">
								{{i.stageName}}
							</view>
							<view class="jindu">
								<view v-if="i.learnProgress===0||i.learnProgress===-1" class="kaikeshuoming">
									<text>{{i.beginDate}}</text>
								</view>
								<view v-if="i.learnProgress===1">
									<u-line-progress :percentage="50" height="6" activeColor="#FFB607">
										<text class="u-percentage-slot"></text>
									</u-line-progress>
								</view>
							</view>
							<view class="islandState">
								<view
									:class="i.learnProgress===2?'islandState-ywc':i.learnProgress===1?'islandState-xxz':i.learnProgress===0?'islandState-wks':i.learnProgress===-1?'islandState-wks':'islandState-wgm'">
									{{i.learnProgress===2?'已完成':i.learnProgress===1?'学习中':i.learnProgress===0?'未学习':i.learnProgress===-1?'未开始':'未购买'}}
								</view>
							</view>
						</view>
					</view>
				</u-transition>
				<view v-if="k===data.case.length-1" :class="((k+1)% 2)!== 0?'endComplete1':'endComplete2'">
					<image class="endComplete-img"
						src="https://www.afbeijing.net/static_resources/assets/daoyuwancheng.png" />
				</view>
			</div>
		</view>
		<view class="fixed-buttons">
			<view class="top-floating-button" @click="goToRegister(2)">
				<image src="https://www.afbeijing.net/static_resources/assets/phb.png" mode="widthFix" />
			</view>
			<view class="bottom-floating-button" @click="goToRegister(3)">
				<image src="https://www.afbeijing.net/static_resources/assets/hktj.png" mode="widthFix" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryStageByStuAg
	} from './api/index.js';
	import eventBus from '@/common/eventBus.js';
	export default {
		data() {
			return {
				pageLoading: false,
				agId: null, // agId
				transitionShow: false,
				isPlaying: true,
				mute: null,
				studyId:null,
				userName: 'Grace',
				points: 100,
				show: false,
				userInfo: {
					// 修改点：给 featureUrl 一个默认值，避免未加载数据时为 undefined
					featureUrl: '' ,
				}, //用户数据
				statrIsland: {},
				endIsland: {},
				data: {
					case: []
				},
				newData: []
			}
		},
		computed: {
			// 计算属性：处理背景图片 URL，确保不会因 featureUrl 为 undefined 而报错
			backgroundImageUrl() {
				if (this.userInfo.featureUrl) {
					return `url(${this.userInfo.featureUrl})`;
				} else {
					return 'url()'; // 当 featureUrl 为空时，返回空的 url()
				}
			}
		},
		/**
		 * 页面加载时触发
		 * 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数
		 */
		onLoad(options) {
			this.userInfo = uni.getStorageSync('userInfo') //获取登录人的信息
			if (!this.userInfo.featureUrl) {
				this.userInfo.featureUrl = '';
			}
			this.studyId = options.id
			this.agId = 'ag' + options.id
			console.log('====agId====',options.id);
			this.getList()
			console.log('onLoad: 页面加载时触发，获取 query 参数');
		},

		/**
		 * 页面显示时触发
		 * 每次打开页面都会触发
		 */
		onShow() {
			console.log('onShow: 页面显示时触发');
			// 显示动画效果
			this.transitionShow = true
			// 初始化岛屿列表数据
			this.goinit()
			// 播放背景音乐
			if (!this.isPlaying) {
				return
			} else {
				this.$music.playBgm({
					mute: false
				})
			}
		},

		/**
		 * 页面初次渲染完成时触发
		 * 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
		 */
		onReady() {
			console.log('onReady: 页面初次渲染完成时触发');

		},

		/**
		 * 页面隐藏时触发
		 * 例如从 A 页面跳转到 B 页面时，A 页面的 onHide 会被触发
		 */
		onHide() {
			console.log('onHide: 页面隐藏时触发');
			// 关闭动画效果
			this.transitionShow = false
			// 关闭背景音乐
			this.mute = true
			this.$music.playBgm({
				mute: true
			})
			
		},

		/**
		 * 页面卸载时触发
		 * 例如当页面被关闭或路由切换时
		 */
		onUnload() {
			console.log('onUnload: 页面卸载时触发');
			// 关闭动画效果
			this.transitionShow = false
			// 关闭背景音乐
			this.mute = true
			this.$music.playBgm({
				mute: true
			})
		},

		// /**
		//  * 下拉刷新时触发
		//  * 需要在页面的 json 文件中配置 "enablePullDownRefresh": true 开启下拉刷新功能
		//  */
		// onPullDownRefresh() {
		// 	console.log('onPullDownRefresh: 下拉刷新时触发');
		// },

		// /**
		//  * 上拉触底时触发
		//  * 常用于加载更多数据
		//  */
		// onReachBottom() {
		// 	console.log('onReachBottom: 上拉触底时触发');
		// },

		// /**
		//  * 用户点击右上角分享时触发
		//  */
		// onShareAppMessage() {
		// 	console.log('onShareAppMessage: 用户点击右上角分享时触发');
		// 	return {
		// 		title: '分享标题',
		// 		path: '分享路径'
		// 	};
		// },

		// /**
		//  * 页面滚动时触发
		//  */
		// onPageScroll(options) {
		// 	console.log('onPageScroll: 页面滚动时触发');
		// },

		// /**
		//  * 监听用户下拉动作
		//  */
		// onPullingDown() {
		// 	console.log('onPullingDown: 监听用户下拉动作');
		// },

		// /**
		//  * 监听用户上拉动作
		//  */
		// onPullingUp() {
		// 	console.log('onPullingUp: 监听用户上拉动作');
		// },

		// /**
		//  * 监听页面滚动到底部/右边时触发
		//  */
		// onScrollToLower() {
		// 	console.log('onScrollToLower: 监听页面滚动到底部/右边时触发');
		// },

		// /**
		//  * 监听页面滚动到顶部/左边时触发
		//  */
		// onScrollToUpper() {
		// 	console.log('onScrollToUpper: 监听页面滚动到顶部/左边时触发');
		// },

		// /**
		//  * 监听 tab 切换
		//  */
		// onTabItemTap(item) {
		// 	console.log('onTabItemTap: 监听 tab 切换');
		// },
		// onLoad() {
		// 	console.log("===onLoad===:",)
		// 	this.$music.playBgm({mute:false})
		// },
		// onShow: function() {
		// 	console.log("===onLoad===:",)
		// 	this.transitionShow = true
		// 	this.goinit()
		// },
		// onHide: function() {
		// 	console.log("===onLoad===:",)
		// 	console.log('离开页面1')
		// 	this.transitionShow = false
		// 	console.log('离开页面2')
		// 	// 开启静音
		// 	this.$music.playBgm({mute:true})
		// },
		// onUnload() {
		// 	console.log("===onLoad===:",)
		// },
		methods: {
			//查询列表
			getList() {
				//接口后期打开
				queryStageByStuAg({
					agId: this.agId
				}).then(response => {
					console.log(response)
					if (response.code === 0) {
						this.data.case = response.data
					} else {
						uni.$u.toast(response.msg)
					}
				}).catch(errors => {
					// uni.$u.toast(errors)
				})
			},
			//播放音乐
			onPlayMusic() {
				console.log(this.isPlaying, this.isPlaying ? '已关闭音乐####' : '已开启音乐####');
				if (this.isPlaying) {
					// 开启静音
					this.$music.playBgm({
						mute: true
					})
				} else {
					// 关闭 静音
					this.$music.playBgm({
						mute: false
					})
				}
				// 切换音乐播放状态
				this.isPlaying = !this.isPlaying;
			},
			goinit() {
				for (let i = 0; i < this.data.length; i++) {
					let newObject = {
						id: this.data[i].id,
						case: []
					};
					if (i === 0) {
						this.statrIsland = this.data[i].case[0];
						newObject.case = this.data[i].case.slice(1);
					} else if (i === this.data.length - 1) {
						console.log('this.endIsland:', i)
						this.endIsland = this.data[i].case[this.data[i].case.length - 1];
						newObject.case = this.data[i].case.slice(0, -1);
					} else {
						newObject.case = this.data[i].case;
					}

					this.newData.push(newObject);
				}
				console.log(this.newData);
			},
			// 
			goToRegister(e, row) {
				console.log(e, row)
				switch (e) {
					case 0:
						// 我的
						uni.switchTab({
							url: '/src/views/pageMain/pageMine/index'
						});
						// 开启静音
						this.$music.playBgm({
							mute: true
						})
						break;
					case 1:
						// 岛屿-学习
						if(row.learnProgress!==-2){
							console.log('===pageHome::::this.agId===', this.agId);
							console.log('===pageHome::::this.studyId===', this.studyId);
							const obj = {
								studyId: this.studyId
							}
							uni.switchTab({
								url: '/src/views/pageMain/pageStudy/index',
								success: function(e) {
									uni.setStorageSync('stageObj', row);
									eventBus.$emit("studyId", obj);
									// uni.$emit('templateClick', row);
								}
							});
							
							// // 开启静音
							// this.$music.playBgm({
							// 	mute: true
							// })
						}else{
							uni.showToast({
								title: '您还未购买~',	// 提示的内容
								icon: 'none',    	// 图标，有效值 "success"、"loading"、"none"
								duration: 2000,   	// 提示的延迟时间，单位毫秒，默认值为 1500
								mask: true        	// 是否显示透明蒙层，防止触摸穿透，默认值为 false
							});
						}
						break;
					case 2:
						// 排行傍
						uni.navigateTo({
							url: '/src/views/pageHome/paihangbang/index' // 这里替换成你实际要跳转的页面路径
						});
						break;
					case 3:
						// 好课推荐
						uni.navigateTo({
							url: '/src/views/pageHome/haoketuijian/index' // 这里替换成你实际要跳转的页面路径
						});
						break;
					default:
						break;
				}
			},
			showPopup() {
				this.show = !this.show;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";
	.heard-BG{
		width: 125rpx;
		height: 120rpx;
		border-radius: 50%;
		background-size: 100% 100%;
		padding: 10rpx;
		padding-left: 18rpx;
		margin-right: 20rpx;
	}
	.container {
		position: relative;
		background-color: #FFFFFF;
		height: 100vh;
	}

	.musicBgm {
		height: 50rpx;
		width: 100%;
		background-color: #FFB607;
		padding-top: 20rpx;
		padding-right: 40rpx;
		display: flex;
		flex-direction: inherit;
		justify-content: flex-end;
	}

	::v-deep.u-icon {
		animation: rotate 7s linear infinite;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.heard {
		height: 15%;
		padding-left: 100rpx;
		background-color: #FFB607;
		color: #ffffff;
		display: flex;
		align-items: center;
		padding-bottom: 30rpx;
	}

	@media screen and (min-width: 768px) {
		.heard {
			height: 25%;
		}
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.user-info {
		display: flex;
		flex-direction: column;
	}

	.user-name {
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 43rpx;
	}

	.point-container {
		width: 120rpx;
		height: 40rpx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #FFB607;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.point-icon {
		width: 28rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}

	.main {
		margin-top: -30rpx;
		background-color: #FFB607;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}

	.jindu {
		padding-left: 15rpx;
		width: 90rpx;
		padding-bottom: 5rpx;
	}

	.u-percentage-slot {
		font-size: 6px;
	}

	.kaikeshuoming {
		width: 100rpx;
		height: 15rpx;
		font-weight: 400;
		font-size: 12rpx;
		color: #666666;
	}

	.caseStatr {
		height: 528rpx;
		background-image: url(#{$bgImageUrl}/assets/homebg1.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;

		position: relative;
	}

	.statrIsland {
		height: 266rpx;
		width: 162rpx;
		background-image: url(#{$bgImageUrl}/assets/xmd.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;

		position: absolute;
		margin-top: 22%;
		right: 19%;
	}

	.islandName {
		padding-top: 5rpx;
		font-weight: 800;
		font-size: 36rpx;
		color: #333333;
		padding-left: 25rpx;
	}

	.islandState {
		padding-left: 15rpx;
	}

	.islandState-ywc {
		width: 80rpx;
		height: 25rpx;
		background: #3ABF7C;
		border-radius: 15rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 16rpx;
		color: #FFFFFF;
		line-height: 25rpx;
	}

	.islandState-xxz {
		width: 80rpx;
		height: 25rpx;
		background: #FF8106;
		border-radius: 15rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 16rpx;
		color: #FFFFFF;
		line-height: 25rpx;
	}

	.islandState-wks {
		width: 80rpx;
		height: 25rpx;
		background: #7A92FC;
		border-radius: 15rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 16rpx;
		color: #FFFFFF;
		line-height: 25rpx;
	}

	.islandState-wgm {
		width: 80rpx;
		height: 25rpx;
		background: #808080;
		border-radius: 15rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 16rpx;
		color: #FFFFFF;
		line-height: 25rpx;
	}

	.caseMiddle1 {
		height: 250rpx;
		margin-top: -1rpx;
		background-image: url(#{$bgImageUrl}/assets/daoyubg1.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
	}

	.caseMiddle2 {
		height: 250rpx;
		margin-top: -1rpx;
		background-image: url(#{$bgImageUrl}/assets/daoyubg2.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
	}

	/* 学习中 动画效果 开始 */
	.statrIsland-jump {
		animation: jump 2s ease-in-out infinite; // 动画时长 0.5 秒，使用 ease-in-out 缓动函数，无限循环
	}

	@keyframes jump {
		0% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10px); // 向上跳动 10 像素
		}

		100% {
			transform: translateY(0);
		}
	}

	/* 学习中 动画效果 结束 */

	/* 已完成 动画效果 开始*/
	/* 已完成 动画效果 结束*/

	.middleIsland-left1 {
		height: 266rpx;
		width: 162rpx;
		background-image: url(#{$bgImageUrl}/assets/xmd.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;

		position: absolute;
		margin-top: -17%;
		margin-left: 5%;
	}

	.middleIsland-right1 {
		height: 266rpx;
		width: 162rpx;
		background-image: url(#{$bgImageUrl}/assets/xmd.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;

		position: absolute;
		margin-top: -17%;
		right: 5%;
	}

	.caseEnd {
		height: 250rpx;
		margin-top: -1rpx;
		background-image: url(#{$bgImageUrl}/assets/daoyubg3.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;

		position: relative;
	}

	.endComplete1 {
		position: absolute;
		bottom: 0;
		left: 20%;
	}

	.endComplete2 {
		position: absolute;
		bottom: 0;
		right: 15%;
	}

	.endComplete-img {
		width: 168rpx;
		height: 50rpx;
	}

	.fixed-buttons {
		position: fixed;
		margin-bottom: 100rpx;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-floating-button {
		position: absolute;
		bottom: 150rpx;
		right: 20rpx;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-floating-button {
		position: absolute;
		bottom: 10rpx;
		right: 20rpx;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>